<html>
<head>
<title>Sertifikat</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style>
    body {
        background: #FFF;
        font-family: arial;
        font-weight:300;
        text-align: left;
        text-decoration: none;
        position: relative;
    }

    #wrapper {
        width: 620px;
        height: 381px;
        position: relative;
        background: #333 url(../../images/bg-certificate-600.jpg) center 10px no-repeat;
        display: block;

        margin: 0 auto;
        margin-top: 5%;
    }

    #wrapper .name-set {
        color: #000;
        font-weight: bold;
        font-size: 16px;
        width: 360px;
        overflow: hidden;
        display: block;

        position: absolute;
        top: 158px;
        left: 130px;
        text-align: center;

    }

    .dpu-id {
        color: #000;
        font-weight: bold;
        font-size: 6px;
        width: 40px;
        overflow: hidden;
        display: block;

        position: absolute;
        top: 104px;
        right: 75px;
        text-align: left;
    }

    .date-label {
        color: #333;
        font-weight: bold;
        font-size: 12px;
        width: 200px;
        overflow: hidden;
        display: block;

        position: absolute;
        top: 213px;
        left: 285px;
        text-align: left;
    }


</style>
</head>
<body onload="window.print()">
<!--WRAPPER-->
<div id="wrapper">
    <div class="dpu-id"><?php echo $mid; ?></div>
    <div class="name-set"><?php echo $nama; ?></div>
    <div class="date-label">
        <span style="display: inline-block; float: left; margin-left: 20px;"><?php echo $tanggal; ?></span>
        <span style="display: inline-block; float: left; margin-left: 13px;"><?php echo $bulan; ?></span>
        <span style="display: inline-block; float: left; margin-left: 26px;"><?php echo $tahun; ?></span>
    </div>
</div>
<!--END WRAPPER-->
</body>
</html>